<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src='./dist/jquery-3.2.1.js'></script>
	<title></title>
</head>
<style type="text/css">
	.main{
		width:1300px;
		margin:0 auto;
	}
.img{
		height:300px;
		overflow:hidden;	
}
button{
	width:100px;
	height:50px;
	margin-top:20px;
	margin-left:20px;
}
</style>
<body>
<div class="main">
	<div class="img">
		<img src="power2.jpg">
	</div>	
		<button>左</button>
		<button>右</button>
		<button>上</button>
		<button>下</button>	
</div>

</body>
<script type="text/javascript">
$('button').eq(0).click(function(){
	$('img').animate({
		'margin-left':'-1300px',
		'opacity':0,
	},1000,function(){
		$('img').animate({
		'margin-left':'0px',
		'opacity':1,			
		},1000)
	});
});
$('button').eq(1).click(function(){
	$('img').animate({
		'margin-left':'1300px',
		'opacity':0,
	},1000,function(){
		$('img').animate({
		'margin-left':'0px',
		'opacity':1,				
		},1000)
	});
});
$('button').eq(2).click(function(){
	$('img').animate({
		'margin-top':'-300px',
		'opacity':0,
	},1000,function(){
		$('img').animate({
		'margin-top':'0px',
		'opacity':1,				
		},1000)		
	});
});
$('button').eq(3).click(function(){
	$('img').animate({
		'margin-top':'300px',
		'opacity':0,
	},1000,function(){
		$('img').animate({
		'margin-top':'0px',
		'opacity':1,				
		},1000)		
	});
});			
</script>
</html>